<template>
    <div>
        <section class="main">
            <!-- <div class="drag-title">拖动排序</div> -->
            <div class="drag-box-left"> 
                <div class="drag-list" draggable="true"
                    v-for="list in data1"
                    :data-id="list.id"
                    @dragstart="dragstartEvent"
                    @dragend="dragendEvent"
                    @dragenter="dragenterEvent"
                    @dragleave="dragleaveEvent"
                    @dragover="dragoverEvent"
                    :key="list.id">
                    {{list.title}}
                </div>
            </div> 
        </section>
        <!-- <div class="submit" @submit="orderSubject">提交</div> -->
    </div>
</template>
<script>
/* eslint-disable */ 
export default {
    data() {
        return {
            dragElement: null,
            lock: true,
            data1: [
                {id: 1, title: '这里是列表1的标题'},
                {id: 2, title: '这里是列表2的标题'},
                {id: 3, title: '这里是列表3的标题'},
                {id: 4, title: '这里是列表4的标题'},
                {id: 5, title: '这里是列表5的标题'},
                {id: 6, title: '这里是列表6的标题'},
                {id: 7, title: '这里是列表7的标题'}
            ],
            newData:[]
        }
    },
    methods: {
        dragstartEvent(ev) {
            // console.log(ev)
            const self = this;
            self.dragElement = ev.target;
            ev.dataTransfer.setData(this, self.dragElement.id);
            ev.target.style.backgroundColor = '#f8f8f8';
        },
        dragendEvent(ev) {
            this.newData = []
            console.log(ev.target.parentNode,'ev.target.parentNode')
            let nodes = ev.target.parentNode.children
            for(let i = 0; i<nodes.length;i++) {
                this.newData.push(nodes[i].dataset.id)
            }
            // ev.target.parentNode.children.forEach(item => {
            //     this.newData.push(item.dataset.id);
            // })
            console.log(this.newData,'this.newData')
            ev.target.style.backgroundColor = '#fff';
            ev.preventDefault();
        },
        dragenterEvent(ev) {
            //  ev = ev || window.event;
            const self = this;
            ev.dataTransfer.getData(self.dragElement.id);
            // console.log(self.dragElement,'1',ev)
            if(self.dragElement.id!= ev.target.dataset.id){
                console.log( ev.target.parentNode.lastElementChild,'lastElementChild')
                console.log(ev.target.parentNode.parentNode.lastChild,'last')
                ev.target.parentNode.insertBefore(self.dragElement, ev.target);
            }
        },
        dragleaveEvent(ev) {
            const self = this;
            // console.log(self.dragElement,'ev.target',ev.target)
            if(self.dragElement != ev.target){
                if(self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
                    ev.target.parentNode.parentNode.appendChild(self.dragElement);
                    self.lock = false;
                }else{
                    self.lock = true;
                }
            }
        },
        dragoverEvent(ev) {
            ev.preventDefault();
        },
        orderSubject() {
            // 提交题目答案
        }
    }
}
</script>

<style >
.submit{
    border-radius: 10px;
    height: 90px;
    text-align: center;
    line-height: 90px;
    width: 60%;
    color:#fff;
    font-size: 30px;
    background-color: #20a0ff;
    cursor: pointer;
}
.main{
  width: 80%;
    overflow: hidden;
}
.drag-box-left{
    width: 80%;
}
.drag-list{
   width: 100%;
    border: 1px solid #ddd;
    padding:10px;
    margin-bottom: 20px;
    transition: border .3s;
    box-sizing: border-box;
}
.drag-list:hover{
    border: 1px solid #20a0ff;
}
.drag-title{
  width: 80%;
    font-weight: 400;
    line-height: 25px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
    box-sizing: border-box;
}
</style>